// d3 charts

function loadViz(name) {
	if(name === "sun") {
		loadSunViz();
	}
	else if(name === "mercury") {
		
	}
}

function loadSunViz() {
	loadSun_sats();
	loadSun_mn_dist_sun();
	loadSun_equator_diameter();
	loadSun_orbit_speed_kmps();
	loadSun_prd_rev_yrs();
}

function loadMercuryViz() {
	
}

function loadSun_sats() {
	var div = $("#sats-wrapper");
	div.find("svg").remove(); // remove the previous svg
	
	var html = '<svg id="sats" width="500" height="500"></svg><table id="moons" width ="445" spacing="0.5">' +
		'<tr><th>Mercury</th><th>Venus</th><th>   Earth</th><th>   Mars</th><th>Jupiter</th><th>Saturn</th><th>Uranus</th><th>Neptune</th><th>Pluto</th></tr></table>'	
	div.html(html) // insert new svg	
		
	var width = 500;
	var height = 500;
	var padding = 35; // Correct for off screen axis
	
	var data = [];
	var items = 9;
	data.push(0);
	data.push(0);
	data.push(1);
	data.push(2);
	data.push(16);
	data.push(17);
	data.push(15);
	data.push(2);
	data.push(1);
	
	
	// Scales
	var xScale = d3.scale.linear();
	xScale.domain([0, data.length]);
	xScale.range([padding, width - padding]);
	var rectWidth = xScale(1) - xScale(0);
	
	var yScale = d3.scale.linear();
	yScale.domain([0, 18]);
	yScale.range([height - padding, padding]);
	
	// Add rects
	d3.select('#sats').selectAll('rect')
	  .data(data)
	  .enter().append('rect')
	    .attr({width : rectWidth,
	           height: function(d)
	             { return height - padding - yScale(d); },
	           fill: 'rgb(0,255,255)',
	           stroke: 'black',
	           x: function(d, i)
	             { return xScale(i); },
	           y: function(d)
	             { return yScale(d); } });
	
	// Add labels (separete selection!)
	d3.select('#sats').selectAll('text')
	  .data(data)
	  .enter().append('text')
	    .attr({fill: 'black',
	           x: function(d, i)
	             { return xScale(i + 0.5); },
	           y: function(d)
	             { return yScale(d) + 15; },
	           "text-anchor": "middle"})
	    .text(function(d) { return d.toFixed(1);});
	
	// Axes
	var xAxis = d3.svg.axis()
	  .scale(xScale)
	  .orient("bottom");
	d3.select('#sats').append("g")
	  .attr("class", "axis")
	  .attr("transform", "translate(0," + (height - padding) + ")")
	  .call(xAxis);
	
	var yAxis = d3.svg.axis()
	  .scale(yScale)
	  .orient("left");
	d3.select('#sats').append("g")
	  .attr("class", "axis")
	  .attr("transform", "translate(" + padding + ", 0)")
	  .call(yAxis);	
}

function loadSun_mn_dist_sun() {
	var div = $("#mn_dist_sun-wrapper");
	div.find("svg").remove(); // remove the previous svg
	
	var html = '<svg id="mn_dist_sun" width="700" height="700"></svg>' +
		'<table id="dist" width ="510" spacing="0.5"><tr><th>Mercury</th><th>Venus</th><th>   Earth</th><th>   Mars</th><th>Jupiter</th><th>Saturn</th><th>Uranus</th><th>Neptune</th><th>Pluto</th></tr></table>';
	div.html(html) // insert new svg
	
	var width = 500;
	var height = 2000;
	var padding = 35; // Correct for off screen axis
	
	var data = [];
	var items = 9;
	data.push(57.9);
	data.push(108);
	data.push(150);
	data.push(228);
	data.push(778);
	data.push(1430);
	data.push(2870);
	data.push(4500);
	data.push(5900);
	
	
	// Scales
	var xScale = d3.scale.linear();
	xScale.domain([0, data.length]);
	xScale.range([padding, width - padding]);
	var rectWidth = xScale(1) - xScale(0);
	
	var yScale = d3.scale.linear();
	yScale.domain([0, 6000]);
	yScale.range([height - padding, padding]);
	
	// Add rects
	d3.select('#mn_dist_sun').selectAll('rect')
	  .data(data)
	  .enter().append('rect')
	    .attr({width : rectWidth,
	           height: function(d)
	             { return height - padding - yScale(d); },
	           fill: 'rgb(0,255,255)',
	           stroke: 'black',
	           x: function(d, i)
	             { return xScale(i); },
	           y: function(d)
	             { return yScale(d); } });
	
	// Add labels (separete selection!)
	d3.select('#mn_dist_sun').selectAll('text')
	  .data(data)
	  .enter().append('text')
	    .attr({fill: 'black',
	           x: function(d, i)
	             { return xScale(i + 0.5); },
	           y: function(d)
	             { return yScale(d) + 15; },
	           "text-anchor": "middle"})
	    .text(function(d) { return d.toFixed(1);});
	
	// Axes
	var xAxis = d3.svg.axis()
	  .scale(xScale)
	  .orient("bottom");
	d3.select('svg').append("g")
	  .attr("class", "axis")
	  .attr("transform", "translate(0," + (height - padding) + ")")
	  .call(xAxis);
	
	var yAxis = d3.svg.axis()
	  .scale(yScale)
	  .orient("left");
	d3.select('#mn_dist_sun').append("g")
	  .attr("class", "axis")
	  .attr("transform", "translate(" + padding + ", 0)")
	  .call(yAxis);
}

function loadSun_equator_diameter() {
	var div = $("#equator_diameter-wrapper");
	div.find("svg").remove(); // remove the previous svg
	
	var html = '<svg id="equator_diameter" width="700" height="700"></svg>' +
		'<table id="equator" width ="510" spacing="0.5"><tr><th>Mercury</th><th>Venus</th><th>   Earth</th><th>   Mars</th><th>Jupiter</th><th>Saturn</th><th>Uranus</th><th>Neptune</th><th>Pluto</th></tr></table>';
	div.html(html); // insert new svg	
	
	var width = 700;
	var height = 700;
	var padding = 100; // Correct for off screen axis
	
	var data = [];
	var items = 9;
	data.push(4880);
	data.push(12100);
	data.push(12800);
	data.push(6790);
	data.push(143000);
	data.push(120000);
	data.push(51800);
	data.push(49500);
	data.push(3000);
	
	
	// Scales
	var xScale = d3.scale.linear();
	xScale.domain([0, data.length]);
	xScale.range([padding, width - padding]);
	var rectWidth = xScale(1) - xScale(0);
	
	var yScale = d3.scale.linear();
	yScale.domain([0, 143000]);
	yScale.range([height - padding, padding]);
	
	// Add rects
	d3.select('#equator_diameter').selectAll('rect')
	  .data(data)
	  .enter().append('rect')
	    .attr({width : rectWidth,
	           height: function(d)
	             { return height - padding - yScale(d); },
	           fill: 'rgb(0,255,255)',
	           stroke: 'black',
	           x: function(d, i)
	             { return xScale(i); },
	           y: function(d)
	             { return yScale(d); } });
	
	// Add labels (separete selection!)
	d3.select('#equator_diameter').selectAll('text')
	  .data(data)
	  .enter().append('text')
	    .attr({fill: 'black',
	           x: function(d, i)
	             { return xScale(i + 0.5); },
	           y: function(d)
	             { return yScale(d) + 15; },
	           "text-anchor": "middle"})
	    .text(function(d) { return d.toFixed(1);});
	
	// Axes
	var xAxis = d3.svg.axis()
	  .scale(xScale)
	  .orient("bottom");
	d3.select('#equator_diameter').append("g")
	  .attr("class", "axis")
	  .attr("transform", "translate(0," + (height - padding) + ")")
	  .call(xAxis);
	
	var yAxis = d3.svg.axis()
	  .scale(yScale)
	  .orient("left");
	d3.select('#equator_diameter').append("g")
	  .attr("class", "axis")
	  .attr("transform", "translate(" + padding + ", 0)")
	  .call(yAxis);	
}

function loadSun_orbit_speed_kmps() {
	var div = $("#orbit_speed_kmps-wrapper");
	div.find("svg").remove(); // remove the previous svg
	
	var html = '<svg id="orbit_speed_kmps" width="700" height="700"></svg>' +
		'<table id="orbit" width ="510" spacing="0.5"><tr><th>Mercury</th><th>Venus</th><th>   Earth</th><th>   Mars</th><th>Jupiter</th><th>Saturn</th><th>Uranus</th><th>Neptune</th><th>Pluto</th></tr></table>';
	div.html(html); // insert new svg	
	
	var width = 500;
	var height = 500;
	var padding = 35; // Correct for off screen axis
	
	var data = [];
	var items = 9;
	data.push(47.9);
	data.push(35);
	data.push(29.8);
	data.push(24.1);
	data.push(13.1);
	data.push(9.64);
	data.push(6.81);
	data.push(5.43);
	data.push(4.74);
	
	
	// Scales
	var xScale = d3.scale.linear();
	xScale.domain([0, data.length]);
	xScale.range([padding, width - padding]);
	var rectWidth = xScale(1) - xScale(0);
	
	var yScale = d3.scale.linear();
	yScale.domain([0, 50]);
	yScale.range([height - padding, padding]);
	
	// Add rects
	d3.select('#orbit_speed_kmps').selectAll('rect')
	  .data(data)
	  .enter().append('rect')
	    .attr({width : rectWidth,
	           height: function(d)
	             { return height - padding - yScale(d); },
	           fill: 'rgb(0,255,255)',
	           stroke: 'black',
	           x: function(d, i)
	             { return xScale(i); },
	           y: function(d)
	             { return yScale(d); } });
	
	// Add labels (separete selection!)
	d3.select('#orbit_speed_kmps').selectAll('text')
	  .data(data)
	  .enter().append('text')
	    .attr({fill: 'black',
	           x: function(d, i)
	             { return xScale(i + 0.5); },
	           y: function(d)
	             { return yScale(d) + 15; },
	           "text-anchor": "middle"})
	    .text(function(d) { return d.toFixed(1);});
	
	// Axes
	var xAxis = d3.svg.axis()
	  .scale(xScale)
	  .orient("bottom");
	d3.select('#orbit_speed_kmps').append("g")
	  .attr("class", "axis")
	  .attr("transform", "translate(0," + (height - padding) + ")")
	  .call(xAxis);
	
	var yAxis = d3.svg.axis()
	  .scale(yScale)
	  .orient("left");
	d3.select('#orbit_speed_kmps').append("g")
	  .attr("class", "axis")
	  .attr("transform", "translate(" + padding + ", 0)")
	  .call(yAxis);	
}

function loadSun_prd_rev_yrs() {
	var div = $("#prd_rev_yrs-wrapper");
	div.find("svg").remove(); // remove the previous svg
	
	var html = '<svg id="prd_rev_yrs" width="700" height="700"></svg>' +
		'<table id="rev" width ="510" spacing="0.5"><tr><th>Mercury</th><th>Venus</th><th>   Earth</th><th>   Mars</th><th>Jupiter</th><th>Saturn</th><th>Uranus</th><th>Neptune</th><th>Pluto</th></tr></table>';
	div.html(html); // insert new svg		
	
	var width = 500;
	var height = 2000;
	var padding = 35; // Correct for off screen axis
	
	var data = [];
	var items = 9;
	data.push(0.241);
	data.push(0.615);
	data.push(1);
	data.push(1.88);
	data.push(11.9);
	data.push(29.5);
	data.push(84);
	data.push(165);
	data.push(248);
	
	// Scales
	var xScale = d3.scale.linear();
	xScale.domain([0, data.length]);
	xScale.range([padding, width - padding]);
	var rectWidth = xScale(1) - xScale(0);
	
	var yScale = d3.scale.linear();
	yScale.domain([0, 250]);
	yScale.range([height - padding, padding]);
	
	// Add rects
	d3.select('#prd_rev_yrs').selectAll('rect')
	  .data(data)
	  .enter().append('rect')
	    .attr({width : rectWidth,
	           height: function(d)
	             { return height - padding - yScale(d); },
	           fill: 'rgb(0,255,255)',
	           stroke: 'black',
	           x: function(d, i)
	             { return xScale(i); },
	           y: function(d)
	             { return yScale(d); } });
	
	// Add labels (separete selection!)
	d3.select('#prd_rev_yrs').selectAll('text')
	  .data(data)
	  .enter().append('text')
	    .attr({fill: 'black',
	           x: function(d, i)
	             { return xScale(i + 0.5); },
	           y: function(d)
	             { return yScale(d) + 15; },
	           "text-anchor": "middle"})
	    .text(function(d) { return d.toFixed(1);});
	
	// Axes
	var xAxis = d3.svg.axis()
	  .scale(xScale)
	  .orient("bottom");
	d3.select('#prd_rev_yrs').append("g")
	  .attr("class", "axis")
	  .attr("transform", "translate(0," + (height - padding) + ")")
	  .call(xAxis);
	
	var yAxis = d3.svg.axis()
	  .scale(yScale)
	  .orient("left");
	d3.select('#prd_rev_yrs').append("g")
	  .attr("class", "axis")
	  .attr("transform", "translate(" + padding + ", 0)")
	  .call(yAxis);	
};
